<template>
    <!-- 热门 -->
    <section class="home-hot">
        <header class="home-hot-header">
            <p class="header-title">热门</p>
            <p class="header-more">更多 ></p>
        </header>
        <main class="home-hot-main">
            <div class="main-box" v-for="(item, index) in listData" :key="index">
                <div class="box-left">
                    <img class="left-img" :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol}.png` : defaultImage" @error="handleImageError" />
                    <p class="flex items-center font-32">{{ item.symbol && item.symbol.toLocaleUpperCase() }} <img class="ml-2" src="@/assets/image/home/Ellipse.png"></p>
                </div>
                <div class="box-center">
                    <img class="center-img" :src="getChangeRatioImage(item.change_ratio)">
                </div>
                <div class="box-right">
                    <p :class="['right-change_ratio',item.change_ratio > 0 ? 'green' : 'red']">{{ item.change_ratio }}%</p>
                    <p class="font-28">${{ item.close }}</p>
                </div>
            </div>
        </main>
    </section>
</template>

<script>
import { HOST_URL } from "@/config";
import defaultImage from '@/assets/loading-default.png';
export default {
    props:{
        listData:{
            type:Array,
            default:()=>[]
        }
    },
    data() {
        return {
            HOST_URL,
            defaultImage
        }
    },
    methods: {
        handleImageError(event){
            event.target.src = this.defaultImage;
        },
        getChangeRatioImage(changeRatio){
            return changeRatio > 0 ? require('@/assets/image/home/top.png') : require('@/assets/image/home/down.png');
        }
    },
}
</script>

<style lang="scss" scoped>
.home-hot{
  margin: 80px 0 70px;
  .home-hot-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    .header-title{
      font-size: 44px;
      font-weight: 600;
    }
    .header-more{
      font-size: 30px;
    }
  }
  .home-hot-main{
    display: flex;
    flex-direction: column;
    row-gap: 28px;
    .main-box{
      height: 142px;
      background-color: #141416;
      border-radius: 22px;
      border: 1px solid #2E2E30;
      display: grid;
      grid-template-columns: 1fr 1fr 0.8fr;
      align-items: center;
      padding: 0 20px;
      .box-left{
        display: flex;
        align-items: center;
        gap: 16px;
        .left-img{
          width: 64px;
          height: 64px;
        }
      }
      .box-right{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
        .right-change_ratio{
          min-width: 108px;
          height: 40px;
          font-size: 28px;
          padding: 0 8px;
          border-radius: 12px;
          text-align: center;
        }
      }
    }
  }
}

.green{
    color: #25a750;
    background-color: #10231e;
}
.red{
    color: #AD3856;
    background-color: #291919;
}
</style>